<template>
  <div>
    <el-table
      ref="table"
      :data="list"
      v-loading="listLoading"
      border
      style="width: 100%; margin-top: 20px"
      size="mini"
    >
      <el-table-column align="center" type="index" label="编号" width="80" />
      <el-table-column
        align="center"
        prop="title"
        label="标题名称"
         :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column align="center" prop="pic" label="封面图">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.pic"
            :preview-src-list="[scope.row.pic]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="类别">
        <template slot-scope="scope">
          <el-tag size="mini" type="success" v-if="scope.row.type == 3"
            >视频</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
       :show-overflow-tooltip="true"
        align="center"
        prop="note"
        label="备注"
      ></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column align="center" label="排序" sortable>
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >预览视频</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <add-ranking ref="rank"></add-ranking>
  </div>
</template>

<script>
import AddRanking from "./addRanking.vue";
export default {
  components: { AddRanking },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      listLoading: false,
      list: [],
    };
  },
  watch: {
    tableData: {
      handler(val) {
        this.list = val;
      },
    },
  },
  methods: {
    handleDelete(row) {
      this.$refs.rank.openDialog(row);
      // let index = this.list.findIndex((p) => p.id == v.id);
      // this.list.splice(index, 1);
      // this.$confirm("是否删除?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
      //   this.list.splice(index, 1)
      //   this.$message({
      //     type: "success",
      //     message: "删除成功!"
      //   });
      // });
    },
  },
};
</script>

<style lang="scss" scoped></style>
